<template>
  <div style="margin-top: 10px" v-loading="fullloading">
    <div style="margin-bottom: 10px;display: flex;justify-content: center;align-items: center">
      <el-input
        placeholder="搜索更多影视..."
        prefix-icon="el-icon-search"
        size="small"
        style="width: 400px;margin-right: 10px"
        v-model="keywords">
      </el-input>
      <el-button size="small" type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
    </div>
    <div style="display: flex;justify-content: space-around;flex-wrap: wrap;text-align: left">
      <el-card style="width: 350px;margin-bottom: 20px" v-for="(item,index) in vedioData.hot" :key="item.titile">
        <div slot="header" class="clearfix">
          <span>{{item.title}}</span>
        </div>
        <div>
          <div style="width: 100%;display: flex;justify-content: center">
           
              <img :src="item.imgSrc" :alt="item.title" style="height: 200px;width:100%" @click="searchDetail(item.detailHref)" >
           
          </div>
          <div style="margin-top: 20px">
           <span>{{item.desc}}</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        vedioData: '',
        fullloading: false,
        keywords: ''
      }
    },
    mounted: function () {
      this.loadVedio();
    },
    methods: {
      searchClick(){
        this.loadVedio();
      },
      searchDetail(href){
        window.location.href=href;
      },
      loadVedio(){
        this.fullloading = true;
        var _this = this;
        var searchWords;
        if (this.keywords === '') {
          searchWords = '*';
        } else {
          searchWords = this.keywords;
        }

        this.getRequest("/vedio-summary").then(resp=> {
          _this.fullloading = false;
          if (resp && resp.status == 200) {
            var data = resp.data;
            _this.vedioData = data;
          }
        })
      },
    }
  }
</script>
<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
